<include file="public:header" />
<!--图片管理-->  

<link rel="stylesheet" type="text/css" href="__STATIC__/weixin/assets/sell/baseui/css/amazeui.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/weixin/assets/sell/baseui/css/admin.css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/weixin/assets/sell/css/style.css"/>



<!--[if (gte IE 9)|!(IE)]><!-->
	<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
	<script type="text/javascript" src="//cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
  	<script>$(function() {FastClick.attach(document.body);});</script>
<!--<![endif]-->

<!--[if lte IE 8 ]>
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
	<script type="text/javascript" src="__STATIC__/weixin/assets/sell/baseui/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<script type="text/javascript" src="//cdn.bootcss.com/amazeui/2.7.2/js/amazeui.min.js"></script>
<link rel="stylesheet" href="__STATIC__/weixin/assets/sell/css/wxmaterial.css">
<script src="__STATIC__/weixin/assets/sell/js/wookmark.js"></script>

<body>

<div class="am-modal am-modal-alert" tabindex="-1" id="fq_alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd" id="fq_alert_title"></div>
    <div class="am-modal-bd" id="fq_alert_info">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="fq_confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd" id="fq_confirm_title"></div>
    <div class="am-modal-bd" id="fq_confirm_info"></div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="fq_true_confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd" id="fq_true_confirm_title"></div>
    <div class="am-modal-bd" id="fq_true_confirm_info"></div>
    <div class="am-modal-footer">
		<span class="am-modal-btn" data-am-modal-confirm>确定</span>
		<span class="am-modal-btn" data-am-modal-cancel class="cancel">取消</span>
    </div>
  </div>
</div>

<script type="text/javascript" src="__STATIC__/weixin/assets/sell/js/jquery.form.js"></script>
<script type="text/javascript" src="__STATIC__/weixin/assets/sell/js/layer/layer.js"></script>
<link rel="stylesheet" href="__STATIC__/weixin/assets/sell/css/wxmaterial.css">
<script src="__STATIC__/weixin/assets/sell/js/wookmark.js"></script>

<!-- content start -->
<div class="admin-content">
	<div class="admin-content-body">

		
		<div class="am-margin-top-sm am-margin-left">
			<strong class="am-text-primary am-text-lg">素材管理</strong> / <small>Material management</small>
		</div>
		<div class="am-margin">
			<div class="am-tabs"  data-am-tabs="{noSwipe: 1}">
	  			<ul class="am-nav am-nav-tabs" >
		    		<li class=""><a href="index.php?m=Admin&c=Weixin&a=wxmaterial">图文素材</a></li>
		    		<li class="am-active"><a href="index.php?m=Admin&c=Weixin&a=wxmaterialimage">图片</a></li>
	  			</ul>
				<div class="am-cf"></div>
	  			<div class="am-tabs-bd sizeofwidth minimage">
		    		<div class="am-tab-panel ">
		    			<div class="news">
							<div class="sub_title_news">
								<div class="info">
									<h3 class="page_title">
										<span class="material_type">图文消息</span>(共<span id="news_count"></span>条)
									</h3>
								</div>
								<a href="/wxmaterial/createnews.html" target="_blank" class="am-btn am-btn-success create">新建图文消息</a>
							</div>
		    				<div class="am-cf"></div>
		    				<div class="empty_tips" style="">
		    					<p>暂无素材</p>
		    				</div>
		    				<style>
		    					#container{
		    						padding:0;
		    					}
		    					#container li{
									list-style:none;
		    					}
		    					.appmsg_list{
		    						position:relative;
		    					}
								
		    				</style>
		    				<div class="appmsg_list" style="margin-top:10px;">
		    					<!-- <div class="newsbox"> -->
		    					
		    					<ul id="container">					    		</ul>

		    				</div>
		    				<div class="am-cf"></div>
		    				<div class="page">
		    					<ul class="am-pagination am-pagination-centered am-text-xs">
		    								    					</ul>
		    				</div>
		    				<!-- 4 -->
		    			</div>
		    		</div>
		    		<script>
		    			$(function(){
							$('.appmsg_list').on('click','.del',function(){
								$('#fq_true_confirm_info').text('确认删除此素材？');
								$('#fq_true_confirm').modal({
									relatedTarget:this,
									onConfirm:function(){
										var mid = $(this.relatedTarget).attr('data-id');
										var newsDesc = $(this.relatedTarget);
										var delNews = newsDesc.parent('.no_br').parent('ul').parent('.appmsg_opr').parent('.newsDesc').parent('li');
										var index = layer.load(1,{shade:0.5} );
										$.ajax({
											type:'post',
											url:'index.php?m=Admin&c=Weixin&a=wxmaterialdel',
											data:{"mid":mid},
											success:function(data){
												layer.close(index);
												if(data.info == 1){
													delNews.remove();
													var wookmark = new Wookmark('#container', {
												        autoResize: true,
												        container: $('.appmsg_list'),
												        offset: 5,
												        outerOffset: 10,
												        itemWidth: 309
												    });
													var count = $('#news_count').text();
													$('#news_count').text(count-1);
													$('#fq_alert_info').text('删除成功');
													$('#fq_alert').modal();
													$('#fq_true_confirm_info').text('');
												}else{
													$('#fq_alert_info').text('删除失败');
													$('#fq_alert').modal();
													$('#fq_true_confirm_info').text('');
												}
											}
										})
									}
								})
							});

							$('.image_list').on('mouseover','.show_image',function(){
								$(this).children('.cover_item').show();
							});

							$('.image_list').on('mouseout','.show_image',function(){
								$(this).children('.cover_item').hide();
							});

							//删除图片素材
							$('.imageBox').on('click','.delImg',function(){
								if($(this).hasClass('delAll')){
									$('#fq_true_confirm_info').text('确认删除选中素材？');
								}else{
									$('#fq_true_confirm_info').text('确认删除此素材？');
								}
								$('#fq_true_confirm').modal({
									relatedTarget:this,
									onConfirm:function(){
										if($(this.relatedTarget).hasClass('delAll')){
											var media = new Array();
											var arr = $('input[name="image[]"]');
											var len = arr.length;
											for(var i=0;i<len;i++){
												media[i] = arr.eq(i).val();
											}
											var delImg = $('.all').parent('.show_image');
										}else{
											var media = $(this.relatedTarget).parent('.cover_item').siblings('.mid').val();
											var delImg = $(this.relatedTarget).parent('.cover_item').parent('.show_image');
										}
										var index = layer.load(1,{shade:0.5} );
										$.ajax({
											type:'post',
											url:'index.php?m=Admin&c=Weixin&a=wxmaterialimagedel',
											data:{"media":media},
											success:function(data){
												layer.close(index);
												if(data.status == 1){
													$('#fq_alert_info').text('删除成功');
													$('#fq_alert').modal();
													delImg.remove();
													if($('.show_image').length <= 1 ){
														location.reload();
													}else{
														var count = parseInt($('#image_count').text());
														$('#image_count').text(count-1);
													}
												}else if(data.status == -1){
													if(media instanceof Array){
														if(data.num == media.length){
															$('#fq_alert_info').text('删除失败,所选图片均已被使用,无法删除');
															$('.del_button').click();
															$('#fq_alert').modal();
														}else{
															$('#fq_alert_info').text(media.length-data.num +'张图片删除成功,'+data.num+'张图片已被使用,无法删除');
															$('#fq_alert').modal();
															setTimeout(location.reload(),3000);
														}
														
													}else{
														$('#fq_alert_info').text('该图片已被使用,无法删除');
														$('#fq_alert').modal();
													}
													
												}
											}  
										})
									}
								})
							});

							//全选
							$('.del_button').click(function(){
								var status = $('.del_button').prop('checked');
								if(status){
									$('.show_image img').css('border','2px solid #3BB4F2');
									$('.show_image img').addClass('all');
									$('.delAll').attr('disabled',false);
									$('.mid').prop('checked',true);
								}
								if(!status){
									$('.show_image img').css('border','1px solid #ccc');
									$('.delAll').attr('disabled',true);
									$('.show_image img').removeClass('all');
									$('.mid').prop('checked',false);
								}
							});

							//上传图片
							$('.upload').click(function(){
								$('#upload_image').click();
							});
							$('#upload_image').change(function(){
								if($('.del_button').prop('checked')){
									$('.del_button').click();
								}
								$('.image_tips').hide();
								$('.loading').show();
								$('.upload').attr('disabled',true);
								$('.upload').html('<i class="am-icon-refresh am-icon-spin"></i> 本地上传');
								$('#image_upload').ajaxSubmit({
									dataType:'json',
									success:function(data){
										$('.loading').after('<div class="show_image"><img src="'+data.image_url+'"><input type="checkbox" value="'+data.media_id+'" class="mid" name="image[]"><div class="cover_item" style="display:none;"><i class="del_icon delImg"></i></div></div>');
										$('#upload_image').replaceWith($('#upload_image').clone(true));
										$('.loading').hide();
										$('.upload').attr('disabled',false);
										$('.upload').html('本地上传');

										var count = parseInt($('#image_count').text())+1;
										$('#image_count').text(count);
									}
								})
							});

							//鼠标特效
							$('.nav li').mouseover(function(){
								if(!$(this).hasClass('active')){
									$(this).addClass('select');
								}
							});
							$('.nav li').mouseout(function(){
								$('.nav li').removeClass('select');
							});
		    			});
		    		</script>
		    		
		    		<div class="am-tab-panel am-active">
		    			<div class="imageBox">
		    				<div class="image_panel">
		    					<div class="sub_title_image">
		    						<h3 class="page_title">
										<span class="material_type">图片素材</span> <span id="image_count">{$count}</span> / 5000
									</h3>
		    						<a href="javascript:void(0);" class="am-btn am-btn-success upload create">本地上传</a>
		    						<form method="post" enctype="multipart/form-data" name="form_image" id="image_upload" action="index.php?m=Admin&c=Weixin&a=localimage" style="display:none;" >
										<input type="file" name="upload_image" value="" class="addimage" style="opacity:0" id="upload_image"  accept="image/*" multiple="multiple"/>
									</form>
		    					</div>
		    					<div class="delImage">
		    						<label class="am-checkbox del_box">
								      <input type="checkbox" value="" data-am-ucheck class="del_button">全选
								    </label>
								    <button type="button" class="am-btn am-btn-primary delAll delImg " disabled>删除</button>
		    					</div>
		    					<div class="empty_tips image_tips" style=""
			    					<p>暂无素材</p>
			    				</div>
			    				<div class="am-cf"></div>
			    				<div class="image_list">
			    					<div class="show_image loading">
			    						<div>
			    							<i class="am-icon-refresh am-icon-spin"></i> 上传中
			    						</div>
			    					</div>
									<volist name="materialList" id="vo">
			    					<div class="show_image">
					    						<img src="{$TencentPicturePre}{$vo['url']}">
					    						<input type="checkbox" value="{$vo['media_id']}" class="mid" name="image[]">
					    						<div class="cover_item" style="display:none;">
							                      <i class="del_icon delImg"></i>
							                    </div>
					    					</div> 
									</volist>		
								   </div>
			    				<div class="am-cf"></div>
			    				<div class="page">
			    					<ul class="am-pagination am-pagination-centered am-text-xs">
			    						 {$page}
										 </ul>
			    				</div>
		    				</div>
		    			</div>
		    		</div>
	  			</div>
			</div>
		</div>
</div>
<footer class="admin-content-footer">
	<hr>
	<p class="am-padding-left">淘优惠 微信淘客系统 版权所有  Copyright © 2004-2016 爱淘客(www.itaoke.org).All Rights Reserved</p>
</footer></div>
<!-- content end -->


<script>
      (function ($){
	      var wookmark = new Wookmark('#container', {
	          autoResize: true, // This will auto-update the layout when the browser window is resized.
	          container: $('.appmsg_list'), // Optional, used for some extra CSS styling
	          offset: 5, // Optional, the distance between grid items
	          outerOffset: 10, // Optional, the distance to the containers border
	          itemWidth: 309 // Optional, the width of a grid item
	      });

	      // Capture clicks on grid items.
	      
	    })(jQuery);
</script>
<script>
	function reloadBrowser(){
		location.reload();
	}
</script>

</body>
</html>